import React, { useState, useRef } from 'react';
import TauActionPanel from '@/components/TauActionPanel';
import TauPage from '@/components/TauPage';
import TauTable from '@/components/TauTable';
import { t } from '@lingui/macro';
import { Button, Dialog, Drawer, Tab, Icon } from '@alifd/next';
import { useStore } from '@/hooks';
import { uniqueId } from 'lodash';
import { column, toSelectDataSource, ENUMS } from './stores/definitions';
import { observer } from 'mobx-react-lite';
import { toJS } from 'mobx';
import DataForm from './components/DataForm';

const tableId = uniqueId('tauTable-');

const tabItems = [
  { key: '0', label: t`用户反馈` },
  { key: '1', label: t`订单服务评价` },
];

const Feedback = () => {
  const { feedbackStore: store } = useStore();
  const [modal, setModal] = useState([]);
  const feedbackRef = useRef();

  /**
   * @description 处理搜索条件
   * @param {*} params
   */
  const handleOnSearch = (params) => {
    const { onData, ...searchArgs } = params.values;
    const [from, to] = onData || [];
    store.search = {
      from,
      to,
      scopes: ['cbv-mzd', 'cbv-partner', 'cbv-driver'],
      ...searchArgs,
    };
  };

  /**
   * 关闭侧边卡片
   */
  const handleCancel = () => {
    setModal([]);
  };

  /**
   * 查看评价与反馈详情
   */
  const handleOpenDrawer = (r, type) => {
    feedbackRef.current = r;
    setModal([type]);
  };

  // 删除评价或反馈
  const handleDelete = (r) => {
    const { id } = r;
    Dialog.confirm({
      title: t`确定删除吗?`,
      onOk: () => store.onDelete(id),
    });
  };

  return (
    <TauPage className="page-container">
      <TauActionPanel
        onSearch={handleOnSearch}
        searchItems={[
          {
            name: 'onData',
            type: 'date-range',
            props: {
              placeholder: store._orderStatus === '0' ? [t`反馈开始时间`, t`反馈结束时间`] : [t`评价开始时间`, t`评价结束时间`],
            },
          },
        ].concat(store._orderStatus === '0' ? [{
          name: 'userType',
          type: 'select',
          props: {
            dataSource: toSelectDataSource(ENUMS.userType),
            placeholder: t`反馈来源`,
          },
        }] : [])}
        keywordSearch={{
          // enabled: false,
          placeholder: t`请输入关键字搜索`,
        }}
        className="action-panel"
      />
      <div className="content">
        <Tab
          activeKey={store.orderStatus}
          onChange={(v) => { store.orderStatus = v; }}
        >
          {tabItems.map((item) => (<Tab.Item key={item.key} title={item.label} />))}
        </Tab>
        <TauTable
          instanceId={tableId}
          primaryKey="id"
          tableLayout="fixed"
          currentPage={store.pg.page}
          pageSize={store.pg.size}
          total={store.total}
          onFetch={(pg) => { store.pg = pg; }}
          loading={store.loading}
          dataSource={toJS(store.refund)}
          columns={store._orderStatus === '0' ? [
            { title: t`编号`, dataIndex: 'idx', width: 44, cell: (v, i) => store.idx(i) },
            column('userType', {}),
            column('user.fullname', {}),
            column('content', {}),
            column('crDate', {}),
            {
              title: t`操作`,
              dataIndex: 'refundNumber',
              width: 180,
              cell: (_, __, feedback) => (
                <>
                  <Button key={'1'} text type="primary" onClick={() => handleOpenDrawer(feedback, 'feedback')} >{t`查看`}</Button>
                  <span style={{ color: 'var(--btn-text-primary-color, #5584FF)' }}> | </span>
                  <Button key={'2'} text style={{ color: 'red' }} type="normal" onClick={() => handleDelete(feedback)} >{t`删除`}</Button>
                </>),
            }] : [
            { title: t`编号`, dataIndex: 'idx', width: 44, cell: (v, i) => store.idx(i) },
            column('commentType', {}),
            column('reviewerName', {}),
            column('orderId', {}),
            column('star', {}),
            column('comment', {}),
            column('crDate', {}),
            {
              title: t`操作`,
              dataIndex: 'refundNumber',
              width: 180,
              cell: (_, __, comments) => (
                <>
                  <Button key={'1'} text type="primary" onClick={() => handleOpenDrawer(comments, 'comments')} >{t`查看`}</Button>
                  <span style={{ color: 'var(--btn-text-primary-color, #5584FF)' }}> | </span>
                  <Button key={'2'} text style={{ color: 'red' }} onClick={() => handleDelete(comments)} >{t`删除`}</Button>
                </>),
            }]
          }
        />
      </div>
      <Drawer
        visible={!!modal[0]}
        title={modal[0] === 'comments' ? '查看评价' : '查看反馈'}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => setModal([...modal, `toClose$${Date.now()}`])}
        width={'600px'}
      >
        <DataForm
          modal={modal}
          info={feedbackRef?.current}
          onCancel={handleCancel}
        />
      </Drawer>
    </TauPage>
  );
};

export default observer(Feedback);
